@extends('base')
@section('title', 'Collections')
@section('csses')
<style type="text/css">
.collection-con {
	border: 1px solid #ddd; 
	border-radius: 4px; 
	padding: 10px;
}

.collection-con:hover {
	box-shadow: 4px 4px #ddd;
}
</style>
@endsection
@section('content')

<div class="col-md-12">
	@if (count($collections) == 0)
	<b>当前还没有虚拟专辑</b>
	@else
		@foreach($collections as $collection)
	    <div class="col-xs-12 col-sm-4 col-md-2" style="text-align: center;  ">
	    	<div class="collection-con">
		        <a href="{{ ($collection->isIncoming()) ? 'javascript:void(0);' : route('collection.article', ['id' => $collection->id]) }}" style="position: relative;display: block;">
		            @if ($collection->isIncoming())
		            <span class="label label-warning" style="position: absolute;">Coming Soon</span>
		            @endif
		            <img width="104" height="150" style="border:1px solid #ccc;" src="{{ asset('uploads/' . $collection->cover) }}">
		        </a>
		        <span style="display: block; margin-top: 10px; overflow: hidden;" title="{{ $collection->name }}">{{ $collection->name }}</span>
		    </div>
	    </div>
	    @endforeach
	@endif
</div>

<div class="col-md-12" style="" >
    <hr style="height:1px;border:none;border-top:1px solid #ddd;" />
</div>

<div class="col-md-12">
	<ul>
		@foreach($all_collections as $collection)
			<li style="list-style: square; margin-bottom: 10px;">
				<a href="{{ route('collection.article', ['id' => $collection->id]) }}" title="">{{ $collection->name }}</a>
				<div class="c-sta">
					Articles: {{ $collection->getArticleCount() }}&nbsp;&nbsp;&nbsp;
					Browse: {{ $collection->view_count }}&nbsp;&nbsp;&nbsp;
					<a href="#">Abstract</a>
				</div>
				<div class="c-abstract" style="display: none; height: auto; background:  #ccc;padding:  10px;border-radius: 4px;">{{ $collection->abstract }}</div>
			</li>
		@endforeach
	</ul>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
$(function(){
	$('.c-sta').on('click', 'a', function(e){
		e.preventDefault();
		$(this).parent().next().toggle();
	})
});

</script>
@endsection